<template>
  <div style="padding: 36px 24px">
    <div
      style="
        padding-bottom: 24px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
      "
    >
      <img src="./img/t14logo.svg" class="logo" />

      <div style="padding-left: 18px; text-align: center">
        <div style="font-size: 28px; font-weight: bolder">AMAN N值计算</div>
        <div>BY 业务建设小组14 @2023</div>
      </div>
    </div>
    <el-space
      style="width: 100%"
      alignment="flex-start"
      size="large"
      wrap
      fill
      :fill-ratio="1"
    >
      <ZUUU />
      <ZUTF />
    </el-space>
  </div>
</template>

<script setup>
import ZUTF from "./ZUTF.vue";
import ZUUU from "./ZUUU.vue";
import useAMANStore from "@/store/aman.js";
const AMANStore = useAMANStore();
</script>

<style scoped>
.logo {
  height: 72px;
  width: 72px;
  animation-name: upAnimation;
  transform-origin: center bottom;
  animation-duration: 3s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}
@keyframes upAnimation {
  0% {
    transform: rotate(0deg);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  10% {
    transform: rotate(-12deg);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  20% {
    transform: rotate(12deg);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  28% {
    transform: rotate(-10deg);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  36% {
    transform: rotate(10deg);
    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);
  }

  42% {
    transform: rotate(-8deg);
    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);
  }

  48% {
    transform: rotate(8deg);
    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);
  }

  52% {
    transform: rotate(-4deg);
    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);
  }

  56% {
    transform: rotate(4deg);
    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);
  }

  60% {
    transform: rotate(0deg);
    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);
  }

  100% {
    transform: rotate(0deg);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
}
</style>
